<template>
    <div class="navpage">

    
      <div class="footer">
      <router-link to="/home" tag="div" active-class="active">
         <span>商城</span> 

      </router-link>
      <router-link tag="div" to="/lists" active-class="active"><span>分类</span> </router-link>
      <router-link  tag="div" to="/shopcar" active-class="active"><span>购物车</span></router-link>
      <router-link tag="div" to="/mine" active-class="active"><span>我</span></router-link> 
      </div>
</div>
</template>

<script>
export default {
 
}
</script>

<style scoped>
.navpage{
    /* overflow: auto; */
    height: 0.88rem;
}
.footer{
    width:7.5rem;
    position: fixed;
    bottom: 0;
    height: 0.78rem;
    padding: 0.1rem,0,0,0;
    display: flex;
    background-color: #fff;;
    box-shadow: 0 -0.1rem 0.2rem 0 rgba(204,204,204,.2);
    
}
.footer div{
    /* width: 0.8rem; */
    /* height: 0.78rem; */
    flex: 1;
    text-align: center;  
    /* vertical-align: bottom; */
    position: relative;
    /* background-color: gold; */
    background: url("../assets/img/icon/nav/home/unselected.png") no-repeat;
    background-size: 0.36rem 0.4rem;
    background-position: center 0.05rem;
    
  
    
}
.footer div span{
  font-size: 0.24rem;
  transform:scale(0.9);
  position: absolute;
  bottom: 0;
  left: 0;
  right:0;
  margin: auto;

}
.footer .active{
   background: url("../assets/img/icon/nav/home/selected.png") no-repeat; 
   background-size: 0.36rem 0.4rem;
    background-position: center 0.05rem;
    color:#FF6040;
}
</style>